<template>
  <el-container class="layout-container">
    <el-aside
      :width="isCollapse ? '64px' : '200px'"
      class="aside">
      <div class="logo" :class="{'minLogo': isCollapse}"></div>
      <el-menu
        router
        default-active="$route.push"
        class="nav-menu"
        background-color="#002033"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
        :collapse-transition="false"
      >
        <el-menu-item index="/">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/articles">
          <i class="el-icon-document"></i>
          <span slot="title">内容管理</span>
        </el-menu-item>
        <el-menu-item index="/image">
          <i class="el-icon-picture"></i>
          <span slot="title">素材管理</span>
        </el-menu-item>
        <el-menu-item index="/addArticle">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">发布文章</span>
        </el-menu-item>
        <el-menu-item index="/comment">
          <i class="el-icon-chat-dot-round"></i>
          <span slot="title">评论管理</span>
        </el-menu-item>
        <el-menu-item index="/fans">
          <i class="el-icon-setting"></i>
          <span slot="title">粉丝管理</span>
        </el-menu-item>
        <el-menu-item index="/settings">
          <i class="el-icon-user"></i>
          <span slot="title">个人设置</span>
        </el-menu-item>

      </el-menu>

    </el-aside>
    <el-container>
      <el-header class="header">
        <div>
          <i
          style="cursor: pointer;"
          :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="isCollapse=!isCollapse"
          ></i>
          传智教育公司名
        </div>

        <!-- 下拉菜单 -->
        <el-dropdown>
          <div class="avatar-wrap">
            <img class="avatar" :src="user.photo" alt="头像">
            <span>{{user.name}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item @click.native="hQuit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Layout',
  data () {
    return {
      user: {
        name: ''
      },
      isCollapse: false
    }
  },
  created () {
    this.$axios({
      method: 'GET',
      url: '/mp/v1_0/user/profile'
    }).then(res => {
      console.log('从后端返回的数据', res)
      this.user.name = res.data.data.name
      this.user.photo = res.data.data.photo
    }).catch(err => {
      console.log(err)
      this.$message.error('获取个人信息失败')
      localStorage.removeItem('tokenStr')
      this.$router.push('/login')
    })
  },
  methods: {
    hQuit () {
      this.$confirm('你要退出吗？').then(() => {
        localStorage.removeItem('tokenStr')
        this.$router.push('/login')
      }).catch(() => {
        this.$message('大人，你真好~')
      })
    }
  }
}
</script>
<style lang="less">
  .layout-container{
    position: fixed;
    left:0;
    right:0px;
    top:0px;
    bottom:0px;
  }
  .aside {
    background-color: #002033;
    .el-menu {
      border-right: none;
    }
    .logo{
      width: 100%;
      height: 60px;
      background: #002244 url(../assets/logo_admin.png) no-repeat center / 140px auto;
    }
    .minLogo{
      background-image: url(../assets/logo_admin_01.png);
      background-size: 36px auto;
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .avatar-wrap {
      display: flex;
      align-items: center;
      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .nav-menu {
    .iconfont {
      margin-right: 10px;
      padding-left: 5px;
    }
  }
  </style>
